console.log("----------------");
console.log("vue3 核心 代理  ");
console.log("----------------");
console.log("\n\n");

function trigger(value) {
  console.warn("触发视图更新 变量改变了 ：", value);
}

function reactive(target) {
  const handlers = {
    set(target, key, value, receiver) {
      console.warn("handlers -> set ", target, key, value, receiver);
      trigger(key, value);
      return Reflect.set(target, key, value, receiver);
    },
    get(target, key, receiver) {
      console.warn("handlers -> get ", target, key, receiver);
      return Reflect.get(target, key, receiver);
    },
    deleteProperty() {
      console.warn("handlers -> set ");
      return Reflect.deleteProperty(target, key, receiver);
    },
  };
  let observed = new Proxy(target, handlers);
  return observed;
}

let obj = { name: "hy" };
console.log("obj        : ", obj);
let proxy = reactive(obj);
console.log("obj 代理給 proxy 对象");
console.log("proxy      : ", proxy);

console.log("\n-------- get --------");
console.log("obj.name   : ", obj.name);
console.log("proxy.name : ", proxy.name);

console.log("\n-------- set --------");
proxy.name = "ynwshy";

console.log("obj.name   : ", obj.name);
console.log("proxy.name : ", proxy.name);
